<template>
  <div class="srbd">
    <div class="bd">
      <div class="cesaun_container">
        <h3 class="title">
          <p class="line">观音灵签</p>
        </h3>
        <div>
          <div style="text-align: center">
            <p style="padding: 20px">
              抽签方法：抽签前双手合十，默念【救苦救难观音菩萨】三遍，心念集中于你所测之事，如爱情、事业、健康等，然后心念一动，点击立即抽签，并查看签辞，请自行体会其中的吉凶指示。
            </p>
            <img
              src="@/assets/image/guanyin.png"
              style="width: 215px; height: 295px"
              alt=""
            />
            <p style="padding: 20px">
              什么是观音灵签：观音灵签是民间流传的，在观音前占卦的一种求签签种，（佛法讲究一切随缘，只要诚心，皆可求问各种事情。）观音灵签有一百签，签文自古至今流传久远，各地签文略有不同，大同小异，解签的意思差不多。
            </p>
          </div>
        </div>
        <div style="text-align: center">
          <el-button type="primary" @click="submitForm" style="margin: 20px"
            >测算</el-button
          >
        </div>

        <!-- 主体表单 -->
      </div>
      <div>
        <h3 class="title">
          <p class="line">测算简介</p>
        </h3>
        <div style="font-size: 14px; margin: 0 10px 20px 10px">
          <p style="">
            1.观世音菩萨是佛教中慈悲和智慧的象征，无论在大乘佛教还是在民间信仰，都具有极其重要的地位，以观世音菩萨为主导的大慈悲精神，被视为大乘佛教的根本。最特别的地方就是观音的灵签很灵。很多人慕名而来就是希望能在这上面求取一支灵签。
          </p>
          <p>2.心诚则灵，测算结果仅供参考。</p>
        </div>
      </div>
    </div>
    <el-dialog
      title="测算结果"
      :visible.sync="centerDialogVisible"
      width="50%"
      class="dialog_cesuan"
    >
      <div class="bazi_info" v-if="result != null">
        <div class="base_info">
          <div class="show">
            <span class="l">您抽出观音灵签第 {{ result.id }} 签:</span>
            <span class="r">{{ result.number }}</span>
          </div>

          <div class="show">
            <span class="l">吉凶:</span>
            <span class="r">{{ result.guanyin.content["吉凶"] }}</span>
          </div>

          <div class="show">
            <span class="l">宫位:</span>
            <span class="r">{{ result.guanyin.content["宫位"] }}</span>
          </div>
          <div class="show">
            <span class="l">签辞:</span>
            <span class="r">{{ result.guanyin.content["签辞"] }}</span>
          </div>

          <div class="show">
            <span class="l">签语:</span>
            <span class="r">{{ result.guanyin.content["签语"] }}</span>
          </div>
          <div class="show">
            <span class="l">解签:</span>
            <span class="r">{{ result.guanyin.content["解签"] }}</span>
          </div>
        </div>

        <div class="base_info">
          <div class="details">
            <div class="names">
              <span>仙机：</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result.guanyin.content["仙机"] }}</span>
            </div>
          </div>
          <div class="details">
            <div class="names">
              <span>详解：</span>
            </div>
            <div class="des">
              <span class="des_deta">{{ result.guanyin.content["详解"] }}</span>
            </div>
          </div>
        </div>
        <div class="yl">
          <span>仅供娱乐！请勿当真</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  computed: {
    currentPath() {
      return this.$route.path; // 获取当前路由路径
    },
  },
  data() {
    return {
      centerDialogVisible: false,
      birthday: "",

      result: {
        id: 32, //佛祖灵签第 32 签
        guanyin: {
          title: "袁术称帝", //签曰
          content: {
            签级: "中下签", //吉凶
            签诗: "鹤在笼中内，鱼游于釜中；梨花开带雨，金菊吐无花。",
            解签: "众星侵月，日落斜西之兆。生肖：【牛】",
            家宅: "阴人灾害事如何，只为家中惹鬼多，如今要保平安日，除非寻僧礼达摩，吉宅人口防夏月有疾难祸非失财，是埕口水道不美，内有阴人作动又嫌祖山不顺，有利各要修整清楚，向佛祖奉经请达摩祖师福灯安门平安。",
            岁君: "众星侵月也当防，小口阴人起祸殃，弱也之时休改革，预先借福谢苍穹。",
            生意: "守旧经营可平安，小人劫财要提防，百事用心要谨慎，结果只能小利攀，生意不贪心妄作，要仍按旧业 经营防偷劫，货款出入谨慎，用心窍取利也。",
            谋望: "古来名利与兵机，谋望虽多得者稀，若不将心且忍耐，必然失计被人欺，谋事有小人累害有口舌，防祸非失财宜用心窍，用些财帛帮助事可成。",
            婚姻: "本来婚偶待团圆，怎奈旁人起祸端，若要事成须速早，不然迟慢守寒年，婚姻切切不可拖延，应及早下聘迎娶，若迟延恐失也，今后又恐无妇也。",
            出外: "一事时令不通，恐防小人劫财，勿出外，宜守旧经营，则可安然。",
            开铺: "之卦不美，未开者开勿，已开者必守旧经营，勿贪财妄取，防小人防亏本，请佛祖符令镇宅平。",
            合伙: "之卦似众星侵月之兆，伙计有私心，防小人防亏本，勿合则吉也。",
            求财: "正财利小稀薄，防小人耗劫，恐要亏本，宜谨慎从正道，偏财阻失不可取，取必失之。",
          },
        },
        image: "https://yuanfenju.com/Public/img/lingqian/guanyin.png", //图片
      },
      area: "",
      form: {
        shuzi: "",
      },
    };
  },
  mounted() {},
  methods: {
    submitForm() {
      this.form["api_key"] = "FNcQHQuf0W8wDrXMjWc0xqTzw";
      let config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      };
      this.$axios
        .post(window.config.apiUrl + "/v1/Lingqian/guanyin", this.form, config)
        .then((res) => {
          if (res.data.errcode == -1) {
            this.$message({
              type: "warning",
              message: res.data.errmsg,
            });

            return;
          }

          this.centerDialogVisible = true;
          this.result = res.data.data;
          console.log(this.result);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.bd {
  border: 1px solid #e5e5e5;
}

.cesaun_container {
}

::v-deep .el-card.is-always-shadow {
  box-shadow: none !important;
}

::v-deep .el-card__header {
  padding: 10px 20px !important;
}

.form-card {
  width: 100%;
  margin: 0 auto;
  border-radius: 2px;
}

.form-title {
  margin: 0;
  color: #303133;
  font-size: 16px;
  text-align: left;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-radio {
  margin-right: 30px;
}

::v-deep .distpicker-address-wrapper {
  width: 100% !important;
}

@mixin flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  height: 45px;
}

@mixin tr1_w {
  width: 33px;
  text-align: center;
}

.dialog_cesuan {
  .bazi_info {
    height: 85vh;
    overflow-y: auto;
    padding: 20px;
    background-color: #fff;

    .base_info {
      margin: 20px;

      .title {
        display: flex;
        padding: 5px;

        .shu {
          width: 5px;
          height: 20px;
          background-color: #e6a84b;
          border-radius: 10px;
        }

        .ti {
          padding-left: 8px;
          font-weight: 800;
          font-size: 15px;
        }
      }

      .show {
        margin-top: 15px;

        .l_ {
          font-size: 14px;
          display: inline-block;
          min-width: 50px;
          font-weight: 800;
        }

        .l {
          font-size: 15px;
          display: inline-block;
          min-width: 50px;
          font-weight: 800;
        }
      }

      .details {
        border: 1px solid #e5e5e5;
        border-bottom: none;
        margin-top: 20px;

        .names {
          text-align: center;
          color: #e6a84b;
          border-bottom: 1px solid #e5e5e5;
          color: #e6a84b;
          font-weight: 800;
          background-color: #fff3ef;
          height: 50px;
          line-height: 50px;
        }

        .des {
          border-bottom: 1px solid #e5e5e5;
          padding-left: 10px;
          display: flex;
          align-items: center;

          .des_text {
            color: #e6a84b;
            width: 14%;
            font-weight: 800;
            user-select: text;
          }

          .des_deta {
            width: 85%;
            line-height: 26px;
            text-indent: 2em;
            user-select: text;
          }
        }
      }
    }
  }
}
</style>